<template>

  <!--    <div class="map-page-container" :class="isEdit == false ? 'min-w-[1400px] h-[700px]' : 'min-w-[590px] h-[400px]'">-->
  <div class="w-full" :class="isEdit == false ? 'h-[700px]' : 'h-[400px]'">
    <div v-if="isEdit" class="flex items-center gap-[5px]">
<!--      <el-select v-model="search" remote filterable placeholder="搜索标点" @change="onchange"
                 :remote-method="remoteMethod" :loading="loading">
        <el-option
          v-for="item in place"
          :key="item.id"
          :label="item.name"
          :value="item.id"/>
      </el-select>-->
      <el-autocomplete
        v-model="search"
        :fetch-suggestions="querySearchAsync"
        value-key="name"
        placeholder="搜索标点"
        @select="onchange"
      />
      <el-button @click="createPolygon">
        {{ isNullOrEmpty( createArea ? "停止添加" : "添加区域" ) }}
      </el-button>
      <el-popover placement="bottom-start" :width="280">
        <template #default>
          <div class="demo-rich-conent flex flex-col gap-[10px]">
            <p>1.在输入框输入具体地址名称进行标点,标点后使用鼠标可移动标记点改变选择</p>
            <p>2.点击添加区域进行区域划定,新建区域后点击鼠标右键完成新增区域</p>
            <p>3.在已划定区域空白圆圈上单击鼠标左键删除点位,拖动圆圈可修改区域</p>
            <p>4.双击已选定地图区域可进行切换编辑区域</p>
          </div>
        </template>
        <template #reference>
          <el-icon color="#409eff">
            <QuestionFilled :size="60"/>
          </el-icon>
        </template>
      </el-popover>
    </div>
    <div class="mt-[10px]"></div>
    <el-amap
      ref="amapRef"
      :show-label="true"
      :center="centerValue"
      :zoom="zoom"
      :doubleClickZoom="false"
      @init="init">
      <el-amap-mouse-tool v-if="createType" :type="createType" :showTooltip="false" :auto-clear="true" @draw="draw"/>

      <template v-for="(polygon, index) in polygons">
        <el-amap-polygon v-model:path="polygon.path" :visible="polygon.visible" :editable="polygon.edit"
                         :draggable="polygon.draggable" :strokeOpacity="polygon.strokeOpacity"
                         :fillColor="polygon.fillColor"
                         :strokeColor="polygon.strokeColor" :strokeWeight="polygon.strokeWeight"
                         :fillOpacity="polygon.fillOpacity"
                         :strokeDasharray="polygon.strokeDasharray" @adjust="addnode" @addnode="addnode"
                         @removenode="addnode"
                         @mouseover="mouseOver(index)" @mouseout="mouseOut(index)" @dblclick="dblclick(index)"/>
      </template>

      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" :draggable="false"
                      @dragend="dragends"/>

    </el-amap>
  </div>
</template>
<!--
  1.center:地图中心点
  2.zoom:地图显示的缩放级别
  3.@init:实例初始化
  4.doubleClickZoom:双击鼠标改变zoom缩放大小
  5.el-amap-mouse-tool{//鼠标工具插件
       type:工具类型marker(点标记),
       circle(圆),
       rectangle(矩形),
       polyline(折线),
       polygon(多边形),
       measureArea(面积计算),
       rule(距离计算),
       rectZoomIn(框选放大),
       rectZoomOut(框选缩小)

       6.showTooltip 是否在鼠标旁边显示提示信息, 默认值：默认true。
       7.autoClear 是否绘制结束后自动清空图层，默认true
       8.@draw 有2个参数data,targer
          第一个参数为绘制生成的对应数据，第二个为绘制的图形对象。对应数据分为以下几类
          marker数据：[lng,lat]
          circle数据：{center:[lng,lat],radisu:number}
          rectangle数据：[[lng,lat],[lng,lat]]
          polyline数据：[[lng,lat],[lng,lat]]
          polygon数据：[[lng,lat],[lng,lat]]
          measureArea数据：number，单位平方米
          rule数据：number,单位米


  }
   <el-amap-polygon />{  提供在地图图面绘制多边形的能力
      path 多边形轮廓线的节点坐标数组。
      visible 是否可见
      draggable  设置多边形是否可拖拽移动，默认为false
      strokeOpacity  轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
      fillColor   多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
      strokeColor  线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
      strokeWeight  轮廓线宽度
      fillOpacity  多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
      strokeDasharray 勾勒形状轮廓的虚线和间隙的样式，
                     此属性在strokeStyle 为dashed 时有效，
                   此属性在ie9+浏览器有效
                   取值： 实线： [0,0,0]
                   虚线： [10,10] ， [10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线 点画线： [10,2,10] ， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线

          @adjust {target: Polygon, lnglat: Lnglat, pixel: Pixel}
                   编辑状态下，鼠标 调整 折线上某个节点或多边形上某个顶点的位置时触发此事件
         @addnode 编辑状态下，通过鼠标在折线上 增加 一个节点或在多边形上增加一个顶点时触发此事件
         @removenode 编辑状态下，通过鼠标在折线上删除一个节点或在多边形上删除一个顶点时触发此事件
          @mouseover 鼠标经过
          @mouseout  鼠标移出
          @dblclick   鼠标左键双击事件

                  }
      <el-amap-marker /> {
       position    点标记在地图上显示的位置
       draggable   设置点标记是否可拖拽移动，默认为false
       @dragend    点标记拖拽移动结束触发事件
      }


  -->
<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import {ref,reactive,watch} from "vue";
// import {ElAmap, ElAmapPolygon} from "@vuemap/vue-amap";
import {cloneDeep, isArray, isEqualArray} from "@pureadmin/utils";
import {QuestionFilled} from "@element-plus/icons-vue";
import {ElAmap, ElAmapPolygon, ElAmapMouseTool, ElAmapMarker} from "@vuemap/vue-amap";
const emits = defineEmits(['update:center', 'update:area'])
import { useDark } from "@/views/welcome/utils";
const { isDark } = useDark();
const props = defineProps({  //父子组件参数传递
  center: {
    type: [Array, Boolean]
  },
  area: {
    type: Array
  },
  zoom: {
    default: 12
  },

  isEdit: {
    type: Boolean
  },
  //  isDark:{
  //   type: Boolean
  // }
})

const mapData = reactive({
  fillColor: "#adea9f",
  hoverFillColor: "#7bccc4"
})
const createArea = ref(false) // 点击开始、停止添加区域
const place = ref([])// 下拉框的数据
const loading = ref(false)
const search = ref("") //搜索
const createType = ref("") //鼠标工具的类型
const polygons = ref([])  //区域数组
const paths = ref([])
const zoom = ref(15);
const centerValue = ref([104.07331, 30.664252]); // 初始中心点
const polyOption = {
  draggable: false,
  visible: true,
  edit: false,
  path: [],
  fillColor: mapData.fillColor,
  strokeOpacity: 1,
  fillOpacity: 0.5,
  strokeColor: mapData.fillColor,
  strokeWeight: 1,
  strokeStyle: 'dashed',
  strokeDasharray: [5, 5],
}

const markers = ref([]) //标记点
let map = ref(null);

//监听中心点
watch(() => props.center, (val) => {
  console.log('监听中心点', val);
  if(val) {
    console.log('map-center', val);
    centerValue.value = val
    addMarker(val[0], val[1])
    console.log("当前标记点", centerValue.value);
  }
}, {deep: true})

//监听区域
watch(() => props.area, (val) => {
  console.log('map-area', val);
  if(val && isArray(val)) {
    polygons.value = [] //置空区域数组
    paths.value = []
    if (JSON.stringify(val).slice(0, 3) !== "[[[") { //如果传过来的不是[[[就不继续执行
      return;
    } else {
      val.forEach(item => { //遍历区域数组
        let i = cloneDeep(polyOption)
        i.path = item
        polygons.value.push(i)
        paths.value.push(item)
      })
    }
  }
}, {deep: true})

const darkblue = 'amap://styles/darkblue'
  const normal = 'amap://styles/normal'
const init = (e) => {  //初始化
  map.value = e;


  map.value.setMapStyle(isDark.value ? darkblue : normal)
}
watch(() => isDark.value, () => {
  
  if(map.value){
    map.value.setMapStyle(isDark.value ? darkblue : normal)
  }
  // map.setMapStyle(isDark.value ? darkblue : normal)

}, {   immediate: true,deep: true })


function draw(e) { //有2个参数data,targer 第一个参数为绘制生成的对应数据，第二个为绘制的图形对象
  console.log("有2个参数data,targer", e);
  let i = cloneDeep(polyOption)
  i.path = e
  polygons.value.push(i)
  paths.value.push(e)
  emits("update:area", paths.value)
}

const addnode = (e) => {   // 鼠标操作折线图 调整 增加 删除
  console.log("鼠标操作折线图 调整 增加 删除", e)
  setTimeout(() => {
    paths.value = polygons.value.map(item => {
      return item.path
    })
    // console.log(paths.value);
    emits("update:area", paths.value)
  }, 500)
}

function mouseOver(e) { // 鼠标经过
  console.log("鼠标经过", e);
  polygons.value[e].fillColor = mapData.hoverFillColor;
}

function mouseOut(index) { //鼠标移出
  console.log("鼠标移出", index);
  polygons.value[index].fillColor = mapData.fillColor;
}

function dblclick(index) { //鼠标左键双击事件
  console.log("鼠标左键双击事件", index);
  if (props.isEdit) {
    polygons.value[index].edit = !polygons.value[index].edit;
    // call();
  }
}

const dragends = e => {  //点标记拖拽移动结束触发事件
  console.log("点标记拖拽移动结束触发事件", e.lnglat);
  centerValue.value = [e.lnglat.lng, e.lnglat.lat];
  emits("update:center", centerValue.value);

};

const addMarker = (lon, lat) => {  //标记点
  let position = {
    position: [lon, lat]
  }
  // console.log(position);
  markers.value = [position]
}

const onchange = (value) => { //选择地址
                              // console.log("选择", value);
  search.value = value.name
  toMap(value)
}

const remoteMethod = (query) => { //自定义远程搜索方法
  // if (query) {
  //   autoInput(query)
  //   setTimeout(() => {
  //     loading.value = false
  //   }, 200)
  // }
}

const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  const results = queryString
  autoInput(results, cb)
}

// 获取搜索信息
function autoInput(query, cb) {
  map.plugin('AMap.AutoComplete', function () {
    var autoOptions = {}
    var placeSearch = new AMap.AutoComplete(autoOptions);
    placeSearch.search(query, function (status, result) {
      // 搜索成功时，result即是对应的匹配数据
      if(result === "NO_PARAMS" || status === "error" || status === "no_data") return
      if (result.info.toLowerCase() === "ok" && result.tips.length > 0) {
         setTimeout(() => {
           cb(result.tips)
         }, 500)
      }
    })
  })
}

function createPolygon() { //开始停止添加区域
  console.log(markers.value);
  console.log(centerValue.value);
  createArea.value = !createArea.value
  if (createArea.value) {
    createType.value = "polygon"
  } else {
    createType.value = ""
  }
}

const toMap = (item) => {  //进行标点
  addMarker(item.location.lng, item.location.lat)
  centerValue.value = [item.location.lng, item.location.lat]
  emits("update:center", centerValue.value)
}
</script>
